<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap"
		 rel="stylesheet">
		<link rel="shortcut icon" type="image/x-icon" href="../../assetsimages/x-icon/agricul.png">
		<link rel="stylesheet" href="../../assets/css/relys/animate.css">
		<link rel="stylesheet" href="../../assets/css/relys/bootstrap.min.css">
		<link rel="stylesheet" href="../../assets/css/relys/all.min.css">
		<link rel="stylesheet" href="../../assets/css/relys/icofont.min.css">
		<link rel="stylesheet" href="../../assets/css/relys/lightcase.css">
		<link rel="stylesheet" href="../../assets/css/relys/swiper.min.css">
		<link rel="stylesheet" href="../../assets/css/relys/style.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
		<style type="text/css">
			.product-content a {
				width: 100%;
			}

			.product-content a h5 { 	 	
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.product-thumb{
				width: 100%;
				height: 0;
				padding-top: 60%;
				position: relative;
			}
			.post-thumb {
			    position: relative;
			    height: 0;
			    padding-top: 100%;
			}
			.product-thumb img, .post-thumb a img{
				width: 100%;
				position: absolute;
				top: 0;
				object-fit: cover;
				height: 100%;
			}

			/* 添加新样式 */
			.product-item-2 {
				animation: float 3s ease-in-out infinite;
				margin: 15px 0;
			}

			.product-inner {
				height: 100%;
				display: flex;
				flex-direction: column;
			}

			.product-content {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.cart-option {
				text-align: center;
				margin-top: 15px;
				padding-bottom: 15px;
			}

			/* 添加浮动动画 */
			@keyframes float {
				0% {
					transform: translateY(0px);
				}
				50% {
					transform: translateY(-20px);
				}
				100% {
					transform: translateY(0px);
				}
			}

			/* 错开动画时间,产生波浪效果 */
			.col-lg-3:nth-child(2) .product-item-2 {
				animation-delay: 0.2s;
			}
			.col-lg-3:nth-child(3) .product-item-2 {
				animation-delay: 0.4s;
			}
			.col-lg-3:nth-child(4) .product-item-2 {
				animation-delay: 0.6s;
			}

			/* 添加新的背景样式 */
			body {
				background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
				position: relative;
				overflow-x: hidden;
			}

			/* 添加装饰性波浪背景 */
			body::before,
			body::after {
				content: '';
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				height: 100vh;
				z-index: -1;
			}

			body::before {
				background: radial-gradient(circle at 80% 20%, rgba(94, 114, 235, 0.08) 0%, rgba(94, 114, 235, 0) 60%);
			}

			body::after {
				background: radial-gradient(circle at 20% 80%, rgba(94, 114, 235, 0.08) 0%, rgba(94, 114, 235, 0) 60%);
			}

			/* 添加动态波浪效果 */
			.wave-bg {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: -2;
				opacity: 0.4;
			}

			.wave-bg::before,
			.wave-bg::after {
				content: '';
				position: absolute;
				width: 200%;
				height: 200%;
				top: -50%;
				left: -50%;
				background: radial-gradient(circle at center, transparent 30%, rgba(94, 114, 235, 0.03) 100%);
				animation: rotate 60s linear infinite;
			}

			.wave-bg::after {
				animation-duration: 30s;
				opacity: 0.5;
			}

			@keyframes rotate {
				from {
					transform: rotate(0deg);
				}
				to {
					transform: rotate(360deg);
				}
			}

			/* 优化内容区域 */
			.container {
				position: relative;
				z-index: 1;
				background: rgba(255, 255, 255, 0.8);
				border-radius: 15px;
				backdrop-filter: blur(10px);
				box-shadow: 0 8px 32px rgba(94, 114, 235, 0.1);
			}

			/* 优化section样式 */
			section {
				position: relative;
				z-index: 1;
			}

			.section-header {
				position: relative;
			}

			.section-header h3 {
				color: #333;
				font-weight: 600;
				position: relative;
				display: inline-block;
			}

			.section-header h3::after {
				content: '';
				position: absolute;
				bottom: -8px;
				left: 0;
				width: 40%;
				height: 3px;
				background: linear-gradient(90deg, #5e72eb, transparent);
				border-radius: 2px;
			}

			/* 修改轮播图相关样式 */
			.banner-2 {
				margin-bottom: 30px;
				overflow: hidden;
				background: none !important;
			}
			
			/* 修改轮播图整体容器样式 */
			.banner-slider {
				width: 100%;
				max-width: 1140px;
				margin: 20px auto;
				padding: 0 15px;
				position: relative;
				background: none !important;
				/* 移除固定高度 */
				height: auto !important;
			}

			/* 使用padding-top实现4:3比例 */
			.banner-item {
				width: 100%;
				height: 0;
				padding-top: 75%; /* 4:3比例 = 75% */
				position: relative;
				border-radius: 15px;
				overflow: hidden;
				background: none !important;
			}

			.banner-inner {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: none !important;
			}

			.banner-thumb {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background: none !important;
			}

			.banner-thumb img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
			}

			/* 调整响应式布局 */
			@media (max-width: 1200px) {
				.banner-slider {
					max-width: 960px;
				}
			}

			@media (max-width: 992px) {
				.banner-slider {
					max-width: 720px;
				}
			}

			@media (max-width: 768px) {
				.banner-slider {
					max-width: 540px;
				}
			}

			@media (max-width: 576px) {
				.banner-slider {
					max-width: 100%;
					padding: 0 15px;
				}
			}

			/* 优化轮播图导航按钮 */
			.swiper-button-prev,
			.swiper-button-next {
				width: 40px;
				height: 40px;
				background-color: rgba(255, 255, 255, 0.9);
				border-radius: 50%;
				box-shadow: 0 2px 6px rgba(0,0,0,0.1);
			}

			.swiper-button-prev:after,
			.swiper-button-next:after {
				font-size: 18px;
				color: #5e72eb;
			}

			/* 优化轮播图分页器 */
			.banner-pagination {
				bottom: 15px !important;
			}

			.banner-pagination .swiper-pagination-bullet {
				width: 8px;
				height: 8px;
				background: rgba(255, 255, 255, 0.8);
				opacity: 0.5;
			}

			.banner-pagination .swiper-pagination-bullet-active {
				opacity: 1;
				background: #5e72eb;
			}

			/* 修改/添加以下样式 */
			.banner-2 {
				margin-bottom: 30px;
				overflow: hidden;
				background: none !important;
			}

			.banner-slider {
				height: 300px !important;
				margin: 20px auto;
				width: 100%;
				max-width: 1140px;
				padding: 0 15px;
				position: relative;
				background: none !important;
			}

			/* 彻底移除所有可能的背景 */
			.banner,
			.banner-2,
			.banner-slider,
			.swiper-container,
			.swiper-wrapper,
			.swiper-slide,
			.banner .container,
			.banner-item,
			.banner-inner,
			.banner-thumb {
				background: none !important;
				background-color: transparent !important;
				background-image: none !important;
			}

			/* 确保轮播图容器完全透明 */
			.swiper-container {
				background: transparent !important;
			}

			/* 移除所有可能的阴影 */
			.banner,
			.banner-2,
			.banner-slider,
			.swiper-container {
				box-shadow: none !important;
			}

			/* 确保图片容器样式正确 */
			.banner-thumb {
				position: relative;
				width: 100%;
				height: 100%;
			}

			.banner-thumb img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
				position: relative;
			}

			/* 添加留言相关样式 */
			.newsletter-form {
				position: relative;
			}
			
			.input-email {
				padding-right: 120px; /* 为按钮留出空间 */
			}
			
			.subscribe-btn {
				cursor: pointer;
				transition: all 0.3s ease;
			}
			
			.subscribe-btn:hover {
				opacity: 0.9;
				transform: translateY(-2px);
			}
			
			/* 添加禁用状态样式 */
			.subscribe-btn:disabled {
				opacity: 0.6;
				cursor: not-allowed;
			}

			/* 修改弹窗相关样式 */
			.custom-alert-overlay {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0,0,0,0.5);
				z-index: 99999 !important; /* 提高z-index */
				animation: fadeIn 0.3s ease;
				display: flex;
				align-items: flex-end;
				justify-content: center;
			}

			.custom-alert {
				position: relative;
				width: 100%;
				max-width: 500px;
				background: white;
				padding: 20px;
				border-radius: 15px 15px 0 0;
				box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
				z-index: 100000 !important; /* 提高z-index */
				text-align: center;
				animation: slideUp 0.3s ease;
				margin-bottom: 0;
			}

			.custom-alert-title {
				font-size: 18px;
				font-weight: bold;
				margin-bottom: 10px;
				color: #333;
			}

			.custom-alert-content {
				margin-bottom: 15px;
				color: #666;
			}

			.custom-alert-button {
				background: #5e72eb;
				color: white;
				border: none;
				padding: 10px 30px;
				border-radius: 25px;
				cursor: pointer;
				transition: all 0.3s ease;
				font-size: 16px;
				min-width: 120px; /* 确保按钮有最小宽度 */
			}

			.custom-alert-button:hover {
				background: #4a5bd4;
				transform: translateY(-2px);
			}

			@keyframes fadeIn {
				from {
					opacity: 0;
				}
				to {
					opacity: 1;
				}
			}

			@keyframes slideUp {
				from {
					transform: translateY(100%);
				}
				to {
					transform: translateY(0);
				}
			}

			.success-icon, .error-icon {
				font-size: 50px;
				margin-bottom: 15px;
			}

			.success-icon {
				color: #28a745;
			}

			.error-icon {
				color: #dc3545;
			}

			/* 修改图标样式 */
			.success-icon i,
			.error-icon i {
				font-size: 50px;
				margin-bottom: 15px;
			}
			
			.success-icon i {
				color: #28a745;
			}
			
			.error-icon i {
				color: #dc3545;
			}
		</style>
	</head>
	<body>
		<div class="wave-bg"></div>
		<div id="app">
			<!-- Banner Section Start Here -->
			<section class="banner banner-2" v-if="banners.length>0">
				<div class="banner-slider">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="item in banners">
							<div class="container">
								<div class="banner-item">
									<div class="banner-inner">
										<div class="banner-thumb">
											<img :src="item.value" alt="banner-slider">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="swiper-button-prev"></div>
					<div class="swiper-button-next"></div>
					<div class="banner-pagination"></div>
				</div>
			</section>
			<!-- Banner Section Ending Here -->
			<!-- product section start here -->
			<section class="product-section product-style2 padding-tb" style="padding-bottom: 0;">
				<div class="container">
					<div class="section-header">
						<h3>推荐招聘信息</h3>
					</div>
					<div class="section-wrapper">
						<div class="row">
							<div class="col-lg-3 col-md-6 col-12" v-for="(item, i) in zhaopinxinxiList">
								<div class="product-item-2">
									<div class="product-inner">
										<div class="product-thumb" v-if="item.tupian">
											<img :src="item.tupian.split(',')[0]" alt="product">
										</div>
										<div class="product-content">
											<a :href="`javascript: onPageTap('../zhaopinxinxi/detail.html?id=${item.id}')`">
												<h5>{{item.zhaopingangwei}}</h5>
											</a>
											<div class="cart-option">
												<a :href="`javascript: onPageTap('../zhaopinxinxi/detail.html?id=${item.id}')`" class="lab-btn"><span>查看详情</span></a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="text-center">
							<a href="javascript: onPageTap('../zhaopinxinxi/list.html')" class="lab-btn"><span>查看更多</span></a>
						</div>
					</div>
				</div>
			</section>
			<section class="product-section product-style2 padding-tb" style="padding-bottom: 0;">
				<div class="container">
					<div class="section-header">
						<h3>求职者信息</h3>
						<p @click="onPageTap('../qiuzhizhexinxi/list.html')">查看更多</p>
					</div>
					<div class="section-wrapper">
						<div class="row">
							<div class="col-lg-3 col-md-6 col-12" v-for="(item, i) in qiuzhizhexinxiList">
								<div class="product-item-2">
									<div class="product-inner">
										<div class="product-thumb" v-if="item.zhaopian">
											<img :src="item.zhaopian.split(',')[0]" alt="product">
										</div>
										<div class="product-content">
											<a :href="`javascript: onPageTap('../qiuzhizhexinxi/detail.html?id=${item.id}')`">
												<h5>{{item.xingming}}</h5>
											</a>
											<div class="cart-option">
												<a :href="`javascript: onPageTap('../qiuzhizhexinxi/detail.html?id=${item.id}')`" class="lab-btn"><span>查看详情</span></a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="text-center">
							<a href="javascript: onPageTap('../qiuzhizhexinxi/list.html')" class="lab-btn"><span>查看更多</span></a>
						</div>
					</div>
				</div>
			</section>
			<section class="blog-section padding-tb">
				<div class="container">
					<div class="section-header">
						<h3>新闻资讯</h3>
						<p>News And Information</p>
					</div>
					<div class="section-wrapper">
						<div class="row justify-content-center">
							<div class="col-xl-4 col-md-6 col-12" v-for="(item, i) in news" :key="i">
								<div class="post-item">
									<div class="post-inner">
										<div class="post-thumb">
											<a :href="`javascript: onPageTap('../news/news-detail.html?id=${item.id}&tablename=news')`"><img :src="item.picture" alt="" /></a>
											<div class="meta-date">
												<div class="md-pre">
													<h5>ORDER</h5>
													<p>{{i+1}}</p>
												</div>
											</div>
										</div>
										<div class="post-content">
											<a :href="`javascript: onPageTap('../news/news-detail.html?id=${item.id}&tablename=news')`">
												<h5>{{item.title}}</h5>
											</a>
											<div class="text-btn">
												<a class="read-more" :href="`javascript: onPageTap('../news/news-detail.html?id=${item.id}&tablename=news')`">阅读更多</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- newsletters section start here -->
			<div class="newsletter-section">
				<div class="container">
					<div class="row justify-content-lg-between justify-content-center align-items-center">
						<div class="col-lg-6 col-12">
							<div class="newsletter-title">
								<h4>写下您的留言</h4>
							</div>
						</div>
						<div class="col-lg-6 col-12">
							<div class="newsletter-form">
								<div class="d-flex flex-wrap">
									<input v-model="liuyan" type="text" placeholder="留言内容" class="input-email">
									<input type="button" value="留言" class="subscribe-btn" @click="liuyanTap">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- newsletters section ending here -->
			<!-- 添加弹窗组件 -->
			<div v-if="showAlert" class="custom-alert-overlay" @click="closeAlert">
				<div class="custom-alert" @click.stop>
					<div :class="alertType === 'success' ? 'success-icon' : 'error-icon'">
						<i :class="alertType === 'success' ? 'fas fa-check-circle' : 'fas fa-times-circle'"></i>
					</div>
					<div class="custom-alert-title">{{alertTitle}}</div>
					<div class="custom-alert-content">{{alertMessage}}</div>
					<button class="custom-alert-button" @click="closeAlert">
						{{needLogin ? '去登录' : '确定'}}
					</button>
				</div>
			</div>
		</div>
		<script src="../../assets/js/relys/jquery.js"></script>
			<script src="../../assets/js/relys/wow.min.js"></script>
			<script src="../../assets/js/relys/swiper.min.js"></script>
			<script src="../../assets/js/relys/fontawesome.min.js"></script>
			<script src="../../assets/js/relys/bootstrap.min.js"></script>
			<script src="../../assets/js/relys/vue.js"></script>
			<script src="../../assets/js/api/api.js"></script>
			<script src="../../assets/js/api/shop.js"></script>
			<script src="../../assets/js/api/tplist.js"></script>
			<script src="../../assets/js/api/defaultuser.js"></script>
			<div id="script"></div>
		</body>
		<script type="text/javascript">
			function onPageTap(url){
				window.location.href = url;
			}
			var app = new Vue({
				el: "#app",
				data: {
					banners: [],
					zhaopinxinxiList: [],
					qiuzhizhexinxiList: [],
					news: [],
					liuyan: "",
					showAlert: false,
					alertType: 'success',
					alertTitle: '',
					alertMessage: '',
					needLogin: false
				},
				methods: {
					onPageTap(url) {
						window.location.href = url;
					},
					showCustomAlert(type, title, message, needLogin = false) {
						console.log('显示弹窗:', {type, title, message, needLogin});
						this.alertType = type;
						this.alertTitle = title;
						this.alertMessage = message;
						this.needLogin = needLogin;
						this.showAlert = true;
						document.body.style.overflow = 'hidden';
					},
					closeAlert() {
						console.log('关闭弹窗, needLogin:', this.needLogin);
						this.showAlert = false;
						document.body.style.overflow = 'auto';
						if(this.needLogin) {
							window.location.href = '../login/login.html';
						}
					},
					liuyanTap() {
						console.log('点击留言按钮');
						var sessiontable = localStorage.getItem("sessionTable");
						
						// 检查登录状态
						if(!sessiontable) {
							console.log('未登录，显示登录提示');
							this.showCustomAlert('error', '未登录', '请先登录后再留言', true);
							return;
						}

						// 检查留言内容
						if(!this.liuyan.trim()) {
							this.showCustomAlert('error', '提示', '请输入留言内容', false);
							return;
						}

						// 移除sessiontable中的引号
						sessiontable = sessiontable.replace(/['"]/g, '');
						console.log('当前用户类型:', sessiontable);

						session(sessiontable, (res) => {
							console.log('session响应:', res);
							if(res.code == 0) {
								var obj = {
									content: this.liuyan,
									userid: localStorage.getItem("userid"),
									username: localStorage.getItem("username") || '',
									cpicture: '',
									reply: '',
									isdone: '未回复'
								};
								
								httpJson("messages/add", "POST", obj, (res) => {
									if(res && res.code == 0) {
										this.showCustomAlert('success', '留言成功', '管理员会尽快回复您的留言');
										this.liuyan = "";
									} else {
										this.showCustomAlert('error', '留言失败', res.msg || '请稍后重试');
									}
								});
							} else if(res.code == 401) {
								this.showCustomAlert('error', '登录已过期', '请重新登录', true);
							} else {
								this.showCustomAlert('error', '登录异常', '请重新登录', true);
							}
						});
					},
				},
				created() {
					tpPage("config",(res) => {
						this.banners = res.data.list
						if(this.banners.length==0){
							this.banners.push({value: "../../assets/images/banner/01.jpg"})
						}else{
							this.banners.forEach(item => {
								if(!item.value){
									item.value = "../../assets/images/banner/01.jpg"
								}
							})
						}
						this.$nextTick(() => {
							var swiper = new Swiper('.banner-slider', {
							    slidesPerView: 1,
							    autoplay: {
							    	autoplay: true,
							        delay: 5000,
							        disableOnInteraction: false,
							    },
							    // 如果需要前进后退按钮
							    navigation: {
							      nextEl: '.swiper-button-next',
							      prevEl: '.swiper-button-prev',
							    },
							    pagination: {
							        el: '.banner-pagination',
							        clickable: true,
							    },
							    loop: true,
							});
						})
					})
					tplist("news", 1, 100, false, false, (res) => {
						this.news = res.data.list
					})
					recommend2('zhaopinxinxi', false, (res) => {
						if (res.code == 0) {
							this.zhaopinxinxiList = res.data
						}
					})
					recommend('qiuzhizhexinxi', false, (res) => {
						if (res.code == 0) {
							this.qiuzhizhexinxiList = res.data.list
						}
					})
					this.recommend = null
					this.recommend = null
					this.recommend = null
					this.recommend = null
					this.recommend = null
					this.recommend = null
					this.recommend = null
					this.recommend = null
				}
			})
		</script>
</html>
